<template>
<div>
    <FouDrawer :title="'編輯權限'" :size="'40%'"  v-model:drawerValue="drawerValue">
      <template #content>
        <el-form :model="form"  :rules="rules" ref="ruleFormRef" label-position="right" label-width="auto">

                <el-form-item label="職位名稱" prop="role_name">
                    <el-input v-model="form.role_name" />
                </el-form-item>
                <el-form-item label="狀態" prop="status">
                    <el-select  v-model="form.status"  size="default" >
                        <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="銷售狀態" prop="sellstatus">
                    <el-select  v-model="form.sellstatus"  size="default" >
                        <el-option v-for="item in sellstatus_options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="授課狀態" prop="coursestatus">
                    <el-select  v-model="form.coursestatus"  size="default" >
                        <el-option v-for="item in coursestatus_options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="" prop="rule_id">
                    <el-tree
                    :data="list"
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="form.rule_id"
                    :props="prop"
                    @check="handleCheckChange"
                    >
                    <template #default="{ node,data }">
                       <span>
                          <el-tag  type="success" v-if="data.is_menu == 1">菜單</el-tag>
                          <el-tag  type="info" v-if="data.is_menu == 0">按鈕</el-tag>
                      </span>
                      <span class="ml-[10px]">{{ node.label }}</span>
                    </template>
                    </el-tree>

                </el-form-item>


        </el-form>
        <div class="flex justify-end mt-10">
          <el-button type="success" @click="confirm(buttonType)" color="#081F42"
            >確認</el-button
          >
        </div>
      </template>
    </FouDrawer>
</div>
</template>

<script setup>
import { ref, watch,reactive } from 'vue' 
import {  updateRole,addrRole} from "@/http/index.js";
import { messageBox ,message} from "@/common/function.js";

const prop = {
  value: "id",
  label: "name",
  children: "child",
};
const drawerValue = ref(false)
const buttonType = ref('')
const ruleFormRef = ref('')
const form = reactive({
    role_name: "",
    status:'',
    sellstatus:'',
    coursestatus:'',
    rule_id:[]
});
const status_options = [
  {
    value: 1,
    label: '正常',
  },{
    value: -1,
    label: '禁用',
  }
]
const sellstatus_options = [
  {
    value: 1,
    label: '可銷售',
  },{
    value: -1,
    label: '不可銷售',
  }
]
const coursestatus_options = [
  {
    value: 1,
    label: '可授課',
  },{
    value: -1,
    label: '不可授課',
  }
]
const rules = reactive({
  role_name: [{ required: true, message: "請輸入名字", trigger: ["blur",'change'] }],
});

const props = defineProps({
    list:Object,
    echo:Object
})
Object.assign(form,props.echo)
watch(()=>props.echo,(newval)=>{
Object.assign(form,newval)
rule_id.value = newval.rule_id
})

const rule_id = ref('')
const handleCheckChange = (data,type) => {
  rule_id.value = [...type.checkedKeys,...type.halfCheckedKeys]
};
const emit = defineEmits(['update'])
const confirm = async (type) => {
    ruleFormRef.value.validate(async (e)=>{
        if (e) {
           const obj = Object.assign({},form)
            obj.rule_id = rule_id.value.toString()
            console.log(obj);
                if (type == 'edit') {
                    console.log(obj);
                const data = await updateRole(obj);
                    if (data.code == 200) {
                        message('修改成功')
                         emit('update')
                    }
                }
                if (type == 'add') {
                    const data = await addrRole(obj)
                        if (data.code == 200) {
                        message('成功添加職位')
                         emit('update')
                    }
                }
        }
        console.log(form);
    })


};

defineExpose({
    buttonType,drawerValue
})

</script>

<style lang='less'  scoped>

</style>